<template>
  <div class="container">
    <!-- Sidebar and other UI components remain unchanged -->

    <div class="form-container">
      <div class="form-group">
        <span class="sub-title">文章标题:</span>
        <input v-model="article.title" type="text" name="essay_title" class="topic"/>
        <br><br>
        <span class="sub-title">归属领域:</span>
        <el-select v-model="article.category" placeholder="选择" style="width: 93%">
          <el-option v-for="item in categories" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </div>
      <br>

      <div class="form-group">
        <span class="sub-title">发表权限:</span>
        <br>
        <el-segmented v-model="value" :options="options" size="large"/>
      </div>

      <br>
      <div class="form-group">
        <span class="sub-title">文章内容:</span>
        <textarea v-model="textarea" class="textarea2"></textarea>
      </div>
      <br>
      <div class="form-group">
        <span class="sub-title">摘要内容:</span>
        <textarea v-model="article.description" class="textarea2"></textarea>
      </div>
      <div class="form-group">
        <span class="sub-title">上传图片文件:</span>
        <el-upload
            v-model:file-list="fileList"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
        >
          <el-icon>
            <Plus/>
          </el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image"/>
        </el-dialog>
      </div>

      <div class="form-group">
        <span class="sub-title">上传软件资源:</span>
        <br>
        <el-upload
            ref="upload"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :limit="1"
            :on-exceed="handleExceed"
            :auto-upload="false"
        >
          <br>
          <template #trigger>
            <el-button type="primary">选择文件</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip text-red">
              一篇文章限制上传一个文件，新文件会覆盖旧文件
            </div>
          </template>
        </el-upload>
      </div>

      <div>
        <!-- 勾选选项 -->
        <el-checkbox v-model="isTimedPublish">是否定时发布</el-checkbox>
        <br>
        <br>
        <!-- 定时发布日期选择器，只有当勾选时才显示 -->
        <div v-if="isTimedPublish" class="form-group">
          <span class="sub-title">选择定时发布:</span>
          <div class="block">
            <el-date-picker
                v-model="value1"
                type="datetime"
                placeholder="选择一个日期"
                format="YYYY/MM/DD HH:mm:ss"
                style="width: 900px;"
            />
          </div>
          <br>
          <br>
        </div>
      </div>
      <div class="form-group actions">
        <input type="submit" value="发表文章" class="btn submit" @click="submitEssay"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import axios from 'axios';
import {ElMessage} from 'element-plus';

const value = ref('公开可见')

// 是否定时发布的勾选状态
const isTimedPublish = ref(false)
// 日期选择器的值
const value1 = ref(null)
const options = [
  '公开可见',
  '仅自己可见',
  '仅高级用户可见',
]
const textarea = ref('')
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const article = ref({
  link: 'article',
  title: '',
  description: '',
  category: '',
  time: formatDate(new Date()),  // 手动格式化为 "yyyy-MM-dd HH:mm:ss" 的字符串
  views: 0
});

const categories = ref([
  {value: '算法设计', label: '算法设计'},
  {value: '数据结构', label: '数据结构'},
  {value: '操作系统', label: '操作系统'},
  {value: '移动开发', label: '移动开发'},
]);

// 提交文章函数
const submitEssay = () => {
  // 设置时间为格式化的字符串
  article.value.time = formatDate(new Date());

  // 使用 axios 发送 POST 请求到后端
  axios.post('http://localhost:8080/resource/save', article.value)
      .then(response => {
        if (response.data.code === 1) {  // 检查 code 字段
          ElMessage.success('文章已成功提交！');
        } else {
          ElMessage.error(`提交失败: ${response.data.msg}`);
        }
      })
      .catch(error => {
        console.error('提交失败:', error);
        ElMessage.error('提交失败，请稍后重试');
      });
};


const fileList = ref([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}
const upload = ref(null)

const handleExceed = (files) => {
  if (upload.value) {
    upload.value.clearFiles()
    const file = files[0]
    file.uid = genFileId()
    upload.value.handleStart(file)
  }
}

const submitUpload = () => {
  if (upload.value) {
    upload.value.submit()
  }
}
</script>

<style scoped>

/* 整体容器 */
.container {
  display: flex;
  width: 1000px;
  max-width: 1400px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  align-items: center; /* 垂直居中 */
}

/* 侧边栏样式 */
.sidebar {
  flex: 1;
  text-align: center;
  margin-right: 20px;
  display: flex;
  flex-direction: column; /* 子元素按列布局 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  height: 100%; /* 保持容器高度，确保居中 */

}

.sidebar img {
  transition: transform 0.3s ease;
}

.sidebar img:hover {
  transform: scale(1.10); /* 悬停放大效果 */
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.username {
  font-family: 'HarmonyOS Sans SC', sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #3498db;
  display: block;
  margin-bottom: 10px;
  text-decoration: none;
}

/* 表单容器样式 */
.form-container {
  flex: 3;
}

.form-group {
  margin-bottom: 20px;
}

.sub-title {
  font-family: 'HarmonyOS Sans SC', sans-serif; /* 设置全局字体为 Arial，无衬线字体作为后备 */
  font-size: 18px;
  height: 20px;
  font-weight: bold;
  color: #2c3e50;
  display: block;
  margin-bottom: 10px;
}

textarea,
input[type="text"],
select {
  font-family: 'HarmonyOS Sans SC', sans-serif;
  width: 90%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  font-size: 16px;
}

textarea {
  height: 150px;
}

.category input {
  margin-right: 5px;
}

.category label {
  margin-right: 20px;
  color: #34495e;
  font-size: 14px;
}

/* 提示文字样式 */
.hint {
  font-size: 12px;
  color: #e74c3c;
  margin-top: 10px;
  display: block;
}

/* 按钮样式 */
.actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit {
  background-color: #3498db;
  color: white;
}

.submit:hover {
  background-color: #2980b9;
}

.btn:hover {
  background-color: #ecf0f1;
}

input[type="file"] {
  display: none;
}


</style>